<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>demo</title>  
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
    <script>  
        $(document).ready(function(){  
            function rollOne(){  
                $(".picBox").animate({marginLeft:"-200px"},2000,"linear",function(){  
                    $(this).css({marginLeft:"0px"});  
                    $(this).children("li").first().remove().clone(true).appendTo(".picBox");  
                });  
            }  
            var startRollOne=setInterval(rollOne,2000);  
            $(".box").hover(function () {  
                clearInterval(startRollOne);  
            }, function () {  
                startRollOne=setInterval(rollOne,2000);  
            });  
        });  
    </script>  
    <style>  
        .box{  
            width: 600px;  
            height: 260px;  
            margin: 160px auto;  
            overflow: hidden;  
            position: relative;  
        }  
        .box p{  
            text-align: center;  
        }  
        .picBox{  
            margin: 0px;  
            padding: 0px;  
            list-style: none;  
            width: 1500px;  
            position: absolute;  
        }  
        .picBox:hover{  
            cursor: pointer;  
        }  
        .picBox li{  
            float: left;  
        }  
        .picBox img{  
            width: 200px;  
            height: 240px;  
        }  
    </style>  
</head>  
<body>  
<div class="box">  
    <p> 图片轮播</p>  
    <ul class="picBox">  
        <li><img src="./yaoshi_1.png" /></li>  
        <li><img src="./yaoshi_2.png" /></li>  
        <li><img src="./yaoshi_3.png" /></li>  
        <li><img src="./yaoshi_4.png" /></li>  
        <!-- <li><img src="./yaoshi_1.png.png" /></li>   -->
    </ul>  
</div>  
</body>  
</html>  